<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../css/elementui.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">

</head>
<body>
<div id="app">
    <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="fetchData()">
    </el-date-picker>

    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 600px;height:400px;"></div>


    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="categoryName"
                label="分类名称"
                width="200">
        </el-table-column>
        <el-table-column
                prop="num"
                label="销售量"
                width="200">
        </el-table-column>
        <el-table-column
                label="数量比例"
                width="200">
            <template slot-scope="scope">
                {{(scope.row.num/totalNum*100).toFixed(0)}}%
            </template>
        </el-table-column>
        <el-table-column
                label="销售额"
                width="200">
            <template slot-scope="scope">
                {{(scope.row.money/100).toFixed(2)}}
            </template>
        </el-table-column>
        <el-table-column
                label="金额比例"
                width="200">
            <template slot-scope="scope">
                {{(scope.row.money/totalMoney*100).toFixed(0)}}%
            </template>
        </el-table-column>
    </el-table>
</div>
</body>

<script src="/js/util.js"></script>
<script src="/js/vue.js"></script>
<script src="/js/axios.js"></script>
<script src="/js/elementui.js"></script>
<script src="/js/echarts.min.js"></script>

<script>

    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                dateRange: [],
                totalNum: 0,
                totalMoney: 0
            }
        },

        methods: {
            fetchData() {
                //查询统计分析数据
                let date1 = this.dateRange[0].Format("yyyy-MM-dd");
                let date2 = this.dateRange[1].Format("yyyy-MM-dd");
                axios.get(`/categoryReport/category1Count.do?date1=${date1}&date2=${date2}`).then(
                    response => {
                    this.tableData = response.data;

                    //计算总销售数量和总销售金额  首先初始化，防止方法被重复调用时数据被累加
                    this.totalNum = 0;
                    this.totalMoney = 0;
                    for (let i = 0; i < this.tableData.length; i++) {
                        this.totalNum += this.tableData[i].num;
                        this.totalMoney += this.tableData[i].money;

                    }

                    let legendData = [];//图例

                    let numData = [];//销售量数据  格式： value:335, name:'直接访问'

                    let moneyData = [];//销售额数据

                    for (let i = 0; i < this.tableData.length; i++) {
                        legendData.push(this.tableData[i].categoryName);
                        numData.push({name: this.tableData[i].categoryName, value: this.tableData[i].num});
                        moneyData.push({name: this.tableData[i].categoryName, value: this.tableData[i].money});

                    }


                    //创建饼图
                    // 基于准备好的dom，初始化echarts实例
                    let myChart = echarts.init(document.getElementById('main'));

                    let option = {
                        title: { //标题
                            text: '商品类目销售分析',
                            subtext: '',
                            x: 'center'
                        },
                        tooltip: {  //提示框
                            trigger: 'item', //出发类型 item：图形触发  axis：坐标轴触发
                            formatter: "{a} <br/>{b} : {c} ({d}%)" //显示格式
                            //a:系列名称-->访问来源
                            //b:数据项名称
                            //c:数值
                            //d:百分比
                        },
                        legend: {//图例组件
                            orient: 'vertical',//数值朝向  vertical:竖直
                            left: 'left',		//组件与左侧距离
                            data: legendData,
                        },
                        series: [//系列列表
                            {
                                name: '访问来源',
                                type: 'pie', //
                                radius: '55%',//半径
                                center: ['30%', '50%'],//圆心坐标，横坐标 纵坐标
                                data: numData,
                                itemStyle: {
                                    emphasis: {//选中区域高亮显示，阴影效果
                                        shadowBlur: 10,//
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            },
                            {
                                name: '访问来源',
                                type: 'pie', //
                                radius: '55%',//半径
                                center: ['80%', '50%'],//圆心坐标，横坐标 纵坐标
                                data: moneyData,
                                itemStyle: {
                                    emphasis: {//选中区域高亮显示，阴影效果
                                        shadowBlur: 10,//
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    // 使用刚指定的配置项和数据显示图表。
                    myChart.setOption(option);
                });
            }
        }
    })

</script>
</html>